<template>
    <div>
        <el-table :data="tableData" style="width: 100%;margin-bottom: 20px;" row-key="id" border default-expand-all
            :tree-props="{ children: 'children' }" :row-class-name="tableRowClassName" class="tableBox">
            <el-table-column prop="name" label="名称" sortable width="180">
            </el-table-column>
            <el-table-column prop="display" label="显示" sortable width="180">
                <template slot-scope="scope">
                    <el-checkbox v-if="scope.row.display == true" :checked="checked" disabled></el-checkbox>
                    <el-checkbox v-if="scope.row.display == false" :checked="checked1" disabled></el-checkbox>
                </template>
            </el-table-column>

            <el-table-column prop="free-selection-steps" label="自由选择步骤" width="180">
                <template slot-scope="scope">
                    <el-checkbox v-if="scope.row.stepSelection == true && scope.row.stepSelectionDisplay == true" :checked="checked"
                        disabled></el-checkbox>
                    <el-checkbox v-if="scope.row.stepSelection == false && scope.row.stepSelectionDisplay == true"
                        :checked="checked1" disabled></el-checkbox>
                </template>
            </el-table-column>

            <el-table-column prop="operation" label="操作">
                <template slot-scope="scope">
                    <el-button size="mini" @click="handleEdit(scope.$index, scope.row)" icon="el-icon-top" slot="prepend"
                        type="info">上移</el-button>
                    <el-button size="mini" type="info" @click="handleDelete(scope.$index, scope.row)" icon="el-icon-bottom"
                        slot="prepend">下移</el-button>
                    <el-button size="mini" type="primary" @click="handleEdit(scope.row.id)" icon="el-icon-edit-outline"
                        slot="prepend">修改</el-button>
                    <el-button size="mini" type="danger" @click="handleDelete(scope.row.id)" icon="el-icon-close"
                        slot="prepend">删除</el-button>
                    <el-button size="mini" type="success" @click="newTem(scope.row.id)" icon="el-icon-plus" slot="prepend"
                        v-if="scope.row.addTemp == true">新增模板</el-button><el-button size="mini" type="warning"
                        v-if="scope.row.category == true" @click="stepManagement(scope.row)"
                        icon="el-icon-guide" slot="prepend">步骤管理</el-button>
                    <el-button size="mini" type="primary" v-if="scope.row.category == true"
                    @click="flowChart" icon="el-icon-search" slot="prepend">流程图</el-button>
                </template>
            </el-table-column>
        </el-table>

    </div>
</template>

<script>
export default {
    name: "templateList",
    data() {
        return {
            tableData: [],
            checked:true,
            checked1:false,

        }

    },
    methods: {
        handleDelete(row) {
            

            this.$store.dispatch("deleteTemMana", row);
            this.tableData = this.$store.state.workFlow.templateMana;
            // console.log(this.tableData);


        },
        tableRowClassName({ row }) {
            // console.log(row);
            if (row.category === true) {

                return 'success-row'
            }
            return ''


        },
        handleEdit(row) {
            // this.$router.push("/templateEditing")
            this.$router.push({ name: 'templateEditing', params: { row } })
        },
        newTem(row) {
            
            this.$router.push({ name: 'newTemplate', params: { row } })
        },
        stepManagement(row){
            this.$router.push({ name: 'stepManagement', params: { row } })

        },
        flowChart() {
            const Url = require("@/assets/tree/arrow.png");
            this.$confirm(`<div style="display:flex;">
                <div class="star">
                    <span>起</span>
                    </div>
                    <img src="${Url}"/>
                    <div class="flowChart">
                        <span>1111</span>
                        </div>
                        <img src="${Url}"/>
                        <div  class="flowChart">
                        <span>1111</span>
                        </div>
                        <img src="${Url}"/>
                        <div class="end">
                    <span>止</span>
                    </div>
                </div>`, "提示", {
                dangerouslyUseHTMLString: true,
                customClass: 'messageBox_class',
                confirmButtonText: "确定",
                showCancelButton: false,
                type: ""
            })

        }

    },
    created() {
        this.tableData = this.$store.state.workFlow.templateMana;
        console.log(this.$store.state.workFlow.templateMana);
    }

}
</script>

<style >
.el-table .success-row {
    background: #FAFAD2;
}
.star {
    color: white;
    text-align: center;
    width: 40px;
    line-height: 40px;
    border: 1px solid #00A65A;
    border-radius: 50%;
    background-color: #00A65A;
}

.end {
    color: white;
    text-align: center;
    line-height: 40px;
    width: 40px;
    border: 1px solid red;
    border-radius: 50%;
    background-color: red;
}

.flowChart {
    color: white;
    text-align: center;
    line-height: 40px;
    width: 76px;
    border-radius: 5px;
    border: 1px solid green;
    background-color: green;
}

.el-message-box {
    width: 600px;
}

;
</style>